import { ReactTypes } from "../hooks";

/**
 * forwardRef 函数 - 用于转发 ref 到子组件的高阶组件
 *
 * 允许组件接收ref并将其转发给子组件，用于访问DOM节点或组件实例
 * 解决了函数组件不能直接接收ref的限制
 *
 * 工作原理:
 * 1. 接收一个渲染函数，该函数能接收props和ref参数
 * 2. 返回一个新组件，它能从父组件接收ref并传递给渲染函数
 * 3. 使子组件能够访问由父组件创建的ref
 *
 * @param render 渲染函数，接收props和ref参数
 * @returns 能够接收并转发ref的新组件
 */
export function forwardRef<T = any, P = any>(
  render: (props: P, ref: ReactTypes.RefObject<T>) => any
): (props: P & { ref?: ReactTypes.RefObject<T> }) => any {
  // 创建一个新的组件函数，它能自动处理ref转发
  const forwardRefComponent = (props: any) => {
    // 从props中提取ref，将其余props传递给渲染函数
    const { ref, ...restProps } = props;
    // 调用原始渲染函数，传入普通props和ref
    return render(restProps, ref);
  };

  // 标记为forwardRef组件，便于工具识别组件类型
  forwardRefComponent._isForwardRef = true;

  return forwardRefComponent;
}
